<!--
 * @Date: 2023-02-18 11:12:58
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-09 20:29:38
 * @FilePath: \A19\frontend\src\components\Class\LiveReceive.vue
-->
<template>
  <LivePanel :course-id="courseId" :students="students" :course-info="courseInfo" :ws-client="wsclient" :camera-stream="audioStream" :self-audio-on="selfAudioOn">
    <template #video>
      <video ref="videoRef" class="video" autoplay muted ></video>
    </template>
    <template #controls>
      <ElButton type="primary" plain @click="switchMode">{{ mod3D?'直播':'3D' }}模式</ElButton>
      <ElButton plain @click="talk">申请发言</ElButton>

      <el-dropdown>
        <div class="sound" @click="mute">
          <img :src="returnSrc">
        </div>
        <template #dropdown>
          <el-dropdown-menu style="padding: 15px 0 10px;">
            <el-slider v-model="value" size="small" vertical height="150px" />
          </el-dropdown-menu>
        </template>
      </el-dropdown>

    <div style="line-height: 32px;margin-left: 20px;" v-show="mod3D">
      画面质量:
      <ElSelect style="width: 80px" v-model="ratio">
        <ElOption :value="1" label="高" />
        <ElOption :value="0.7" label="中" />
        <ElOption :value="0.5" label="低" />
      </ElSelect>
    </div>
    
      
    </template>
  </LivePanel>
</template>

<script lang="ts" setup>
import { useClientStore } from "../../pinia/stores/client";
import { wsLiveReceive } from "@/hooks/wsLiveReceive";
import { ref, provide, onMounted, watch, computed, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// const props = defineProps<{ courseId: string }>();
// const courseId = props.courseId || "63c0c09ae58ff204b7dcceaa";
const route = useRoute()
const router = useRouter()
const courseId = route.params.courseId as string


const {wsclient,videoRef,students,courseInfo,talk,audioStream,selfAudioOn} = wsLiveReceive(courseId)
const mod3D = ref(false) 
const ratio = ref(0.5)
provide('el',videoRef)
provide('wsclient',wsclient)
provide('courseId',courseId)
provide('mod3D',mod3D)
provide('ratio',ratio)

const returnSrc = computed(() =>{
  return mod3D.value?(muted.value?'/mutedb.png':'/volumeb.png'):(muted.value?'/muted.png':'/volume.png')
})

let lastV = 100
const value = ref(0)
const muted = computed(() =>{
  return value.value === 0
})
const mute = ()=>{
  videoRef.value!.muted = false
  if(!muted.value){
    lastV = value.value
    value.value = 0
  }
  else{
    value.value = lastV
  }
}
watch(value,newValue =>{
  // console.log(newValue);
  videoRef.value!.volume = newValue / 100
})

const switchMode = () =>{
  mod3D.value = !mod3D.value
  videoRef.value!.removeEventListener('pause',pausedHandler)
  videoRef.value!.addEventListener('pause',pausedHandler)
}
function pausedHandler(e:Event){
  (e.target as HTMLVideoElement).play()
}

onMounted(() =>{
  if(!courseId){
  ElMessage.error('不存在')
  router.back()
  return
}
})
</script>

<style lang="less" scoped>
.video {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  // background-color: black;

  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
// #controls{
//   height: 100%;
//   width: 100%;
//   padding: 0 5px;
// }
.sound{
  margin-left: 20px;
  cursor: pointer;
  img{
    height: 26px;
  }
}
</style>
